<template>
  <div class="pageNation">
    <Page
      :total="total"
      :model-value="curentPage"
      :page-size="pageSize"
      show-total
      show-elevator
      show-sizer
      prev-text="上一页"
      next-text="下一页"
      @on-change="handlePageChange"
      @on-page-size-change="handlePageSizeChange"
    />
  </div>
</template>

<script setup>
const props = defineProps({
  total: {
    type: String,
    default: '10',
  },
  curentPage: {
    type: String,
    default: '1',
  },
  pageSize: {
    type: String,
    default: '10',
  },
})

const emit = defineEmits(['pageChange','pageSizeChange']);
// 页码改变事件
const handlePageChange = (page) => {
  props.curentPage = page;
  emit('pageChange', page);
}
// 每页条数改变事件
const handlePageSizeChange = (size) => {
  props.pageSize = size;
  emit('pageSizeChange', size);
}
</script>

<style scoped>
.pageNation {
  display: flex;
  justify-content: flex-end;
}
</style>
